<template>
  <div>
    <div class="lunbo-top">
      <el-button type="primary" @click="dialogFormVisible = true">添加图片<i class="el-icon-upload el-icon--right"></i></el-button>
    </div>
  <!--  轮播图表格  -->
  <el-table
      :data="lunboTable"
      border

      :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}"
      style="width: 492px">
    <el-table-column
        fixed
        prop="id"
        align="center"
        label="轮播图ID"
        width="120">
    </el-table-column>
    <el-table-column
        prop="imageUrl"
        label="轮播图照片"
        align="center"
        width="220">
      <template slot-scope="scope">
        <img :src="scope.row.imageUrl" style="width: 100%; height: auto;">
      </template>
    </el-table-column>
    <el-table-column
        label="操作"
        width="150"
        align="center">
      <template slot-scope="scope">
        <el-button type="text" size="small">修改</el-button>
        <el-button type="text" size="small" @click="deletelunbo(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!-- 上传轮播图弹窗 -->
    <div>
    <el-dialog title="上传图片" :visible.sync="dialogFormVisible">
      <el-upload
          class="upload-demo"
          action="http://localhost:8081/file/upload"
          enctype="multipart/form-data"
          name="file"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">放弃上传</el-button>
        <el-button type="primary" @click="insertlunbo">确定上传</el-button>
      </div>
    </el-dialog>
  </div>
  </div>



</template>

<script>
    export default {
        name: "lunbotu",
      data:function (){
        return {
          lunboTable:[],
          fileList:[],
          dialogFormVisible:false,
          file:'',
          path:''

        }

      },
      /*初始方法，页面加载的时候方法同时执行*/
      created: function (){
        this.selectAll();
      },
      /*普通方法会触发事件*/
      methods:{
        selectAll(){
          /*请求数据*/
          this.axios.post("/zixunlunbo/selectlunbo",{
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then((res)=>{
            console.log(res.data.data);
            this.lunboTable=res.data.data;
          }).catch((err)=>{

          })
        },
        /*新增图片组件佩戴方法*/
        handleRemove(file, fileList) {
          console.log(file, fileList);
          this.path='';
        },
        handlePreview(file) {
          console.log(file);
        },
        handleSuccess(response) {
          console.log(response);
          this.path=response;
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${file.name}？`);
        },
        /*新增轮播*/
        insertlunbo(){
          this.axios.post("/zixunlunbo/insertlunbo",{
              image_url:this.path
          }).then((res)=>{
            this.selectAll();
          }).catch((err)=>{

          })
          this.dialogFormVisible = false;
        },
        /*删除轮播*/
        deletelunbo(row){
          console.log(row.id)
          this.axios.post("/zixunlunbo/deletelunbo",{
            id:row.id
          }).then((res)=>{
            this.selectAll();
          }).catch((err)=>{

          })
        }
      }
    }
</script>

<style scoped>
.lunbo-top{
  margin-bottom: 20px;
}
</style>